<template>
  <!-- <el-drawer v-model="openFlag" title="转换结果" size="1300"> -->

  <dw-drawer ref="dwDrawerRef" :size="1200">
    <template #header>转换结果</template>
    <div style="display: flex; width: 100%; justify-content: space-between; padding-left: 20px; width: calc(100% - 20px)">
      <div style="width: 580px">
        <div v-for="(viewerModel, index) in oldViewerModelList" :key="index" style="width: 100%">
          <h3>{{ viewerModel.modelName }}【视图模型协议】</h3>
          <el-input v-model="viewerModel.modelSchema" type="textarea" :rows="15"></el-input>
        </div>
      </div>
      <div style="width: 580px">
        <div v-for="(viewerModel, index) in viewerModelList" :key="index" style="width: 100%">
          <h3>{{ viewerModel.modelName }}【界面协议】</h3>
          <el-input v-model="viewerModel.modelSchema" type="textarea" :rows="15"></el-input>
        </div>
      </div>
    </div>
  </dw-drawer>

  <!-- </el-drawer> -->
</template>
<script setup lang="ts">
import { dwHttp } from '@/utils/http';
import { ref } from 'vue';
import type { IViewerModel } from '../IViewerModel';
import DwDrawer from '@/components/drawer/index.vue';
defineOptions({
  name: 'ConvertResultDrawer',
});
// const openFlag = ref<boolean>(false)
const viewerModelList = ref<IViewerModel[]>([]);
const oldViewerModelList = ref<IViewerModel[]>([]);
const dwDrawerRef = ref();
const open = (ids: string[], rows: IViewerModel[]) => {
  oldViewerModelList.value = rows;
  // openFlag.value = true
  dwDrawerRef.value.show();
  dwHttp({
    method: 'post',
    isSuccessTip: false,
    url: '/admin-api/sys/viewer/model/convert',
    data: ids,
  }).then((res) => {
    const { data } = res;
    viewerModelList.value = data as unknown as IViewerModel[];
  });
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
:deep(.el-drawer__header) {
  margin: 0;
  padding: 0 20px;
}
:deep(.el-drawer__body) {
  margin: 0;
  padding: 0;
}
</style>
